<template>
  <div class="filestatistics-data">
    <el-card>
      <div slot="header">
        <tools-btn
          :toolsData="toolsData"
          @addData="addData"
          @refresh="refresh"
          @search="search"
          @fieldSet="fieldSet"
          @hasOperation="hasOperation"
        />
      </div>
      <el-row>
        <el-col :span="12">
          <div id="myChart" :style="{width: '500px', height: '500px'}"></div>
        </el-col> 
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import ToolsBtn from "../../components/Tools/ToolsBtn";
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/pie')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  components: {
    ToolsBtn
  },
  name: "FileStatistics",
  data() {
    return {
      toolsData: {
        title: "案卷统计",
        datatimefier: false,
        datatime: '',
        identifier: false,
        content: "请输入设备号",
        query: '',
        oBtnShow: [
          { btn0: false }, // 新增按钮
          { btn1: false }, // 刷新按钮
          { btn2: false }, // 搜索按钮
          { btn3: false }, // 设置按钮
          { btn4: false } // 导出Excel按钮
        ]
      },
      querycomplete: '',
      unfinished: ''
    }
  },
  mounted(){
    this.drawLine();  // 初始化
  },
  methods: {
    drawLine(){
      this.$api.LAWMONITORING.FILESTATISTICS()
        .then(res => {
          console.log(res)
          let myChart = this.$echarts.init(document.getElementById('myChart'))
          var option = {
            title: {
              text: '案卷完成情况',
              left: 'center',
              top: 20,
            },
            tooltip: {
              formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
              orient: 'vertical',
              x: 'left',
              data: ['完成', '未完成']
            },
            series: [
              {
                name: '案卷完成情况',
                type: 'pie',
                radius: ['50%', '70%'],
                data: [
                    { value: this.complete, name: '完成' },
                    { value: this.unfinished, name: '未完成' },
                  ]
                }
              ]
            };
            myChart.setOption(option);
        })
        .catch(() => {
            this.$message({
              showClose: true,
              message: '暂无数据',
              type: 'error'
            });
        })
    },
    // 新增数据
    addData() {
      // console.log("新 增");
      this.handleEdit();
    },
    // 列表数据刷新
    refresh() {
      // console.log("刷 新");
      this.getList(1,50)
    },
    // 搜索
    search() {
      // console.log("搜索");
    },
    // 字段设置
    fieldSet() {
      // console.log("字段设置");
    },
    // 隐藏表格操作列
    hasOperation() {
      // console.log("隐藏表格操作列");
      this.table.hasOperation = !this.table.hasOperation;
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
